<template>
  <div class="era" style="background-color:rgb(242, 245, 245)">
    <img src="img/zjt.png" class="re" @click="fun()" />
    <span class="new">上新精选</span>
    <van-swipe class="my-swipe era-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <p>魔凡家用台式反渗透浸饮机</p>
        <span>反渗透过滤 UV杀菌</span>
        <img src="img/sa.png" />
      </van-swipe-item>
      <van-swipe-item>
        <p>米家跨界烟灶套装S1</p>
        <span>油烟挥手控 干净又轻松</span>
        <img src="img/sa2.png" />
      </van-swipe-item>
      <van-swipe-item>
        <p>气凝胶抗寒疏水加绒休闲卫裤</p>
        <span>强化锁温 疏水抗污</span>
        <img src="img/sa3.png" />
      </van-swipe-item>
      <van-swipe-item>
        <p>高含量GABA睡眠粒</p>
        <span>缓解焦虑 延长深度睡眠</span>
        <img src="img/sa4.png" />
      </van-swipe-item>
      <van-swipe-item>
        <p>戴时光黄金时来运转转运珠吊坠</p>
        <span>999足金材质 配国检证</span>
        <img src="img/sa5.png" />
      </van-swipe-item>
    </van-swipe>
    <!-- ------------------------- -->
    <div class="nav">
      <div>上新精选</div>
      <div>精选新品 闭眼放心买</div>
      <div></div>
    </div>
    <!-- --------------------- -->
    <div class="rax-view" @click="fun1(v.id)" v-for="(v,i) in this.$store.state.details.arr" :key="i" 
      style="box-sizing: border-box; display: flex; flex-direction: row; align-content: flex-start; flex-shrink: 0; position: relative; height: 37.0667vw; padding-top: 0vw; padding-left: 0vw; padding-right: 0vw; background-color: rgb(255, 255, 255);">
      <div class="rax-view"
        style="box-sizing: border-box; display: flex; flex-direction: row; align-content: flex-start; flex-shrink: 0; position: relative; cursor: pointer; width: 93.6vw; height: 37.0667vw; align-items: flex-end;"
        data-appeared="true">
        <div class="rax-view"
          style="box-sizing: border-box; display: flex; flex-direction: column; place-content: flex-start center; flex-shrink: 0; position: static; left: 0vw; top: 0vw; width: 34.6667vw; height: 34.6667vw; overflow: hidden; border-radius: 1.6vw; margin-left: 3.2vw; align-items: center; background-color: rgb(244, 247, 247);">
          <div class="rax-view"
            style="box-sizing: border-box; display: flex; flex-direction: column; align-content: flex-start; flex-shrink: 0; position: relative; top: 0vw; left: 0vw; width: 34.6667vw; height: 34.6667vw; border-radius: 1.6vw;">
            <img :src="v.data[0].img" style="width: 34.6667vw; height: 34.6667vw; box-sizing: border-box; object-fit: cover; filter: blur(0px);"/>
          </div>
        </div>
        <div class="rax-view" style="box-sizing: border-box; display: flex; flex-direction: column; align-content: flex-start; flex: 1 1 0%; position: static; margin-left: 10vw; height: 34.6667vw; left: 0vw; top: 0vw;">
          <div class="rax-view" style="box-sizing: border-box; display: flex; flex-direction: column; align-content: flex-start; flex: 1 1 0%; position: static; height: 26.9333vw; left: 0vw; top: 0vw;">
            <span class="rax-text rax-text--overflow-hidden rax-text--singleline" style="box-sizing: border-box; display: block; font-size: 4.2667vw; white-space: nowrap; overflow: hidden; position: static; left: 0vw; top: 0vw; width: 48.5333vw; height: 5.8667vw; color: rgb(51, 51, 51); line-height: 5.8667vw; font-weight: 600; margin-bottom: 0.8vw; margin-top: 0.8vw; text-overflow: ellipsis;">{{v.data[0].title}}</span>
            <span class="rax-text rax-text--overflow-hidden rax-text--singleline" style="box-sizing: border-box; display: block; font-size: 3.2vw; white-space: nowrap; overflow: hidden; position: static; left: 0vw; top: 0vw; width: 48.5333vw; height: 4.5333vw; color: rgb(119, 119, 119); line-height: 4.5333vw; font-weight: 400; margin-bottom: 0.8vw; text-overflow: ellipsis;">{{v.data[0].title1}} {{v.data[0].title2}}</span>
            <div class="rax-view"
              style="box-sizing: border-box; display: flex; flex-direction: row; align-content: flex-start; flex-shrink: 0; position: static; height: 4.5333vw; left: 0vw; top: 0vw; align-items: center; margin-bottom: 0.8vw;">
              <span  class="rax-text rax-text--overflow-hidden rax-text--singleline"
                style="box-sizing: border-box; display: block; font-size: 3.2vw; white-space: nowrap; overflow: hidden; position: static; left: 0vw; top: 0vw; height: 4.5333vw; color: rgb(204, 153, 51); line-height: 4.5333vw; font-weight: 400;"
              >100%</span>
              <span
                class="rax-text rax-text--overflow-hidden rax-text--singleline"
                style="box-sizing: border-box; display: block; font-size: 3.2vw; white-space: nowrap; overflow: hidden; position: static; left: 0vw; top: 0vw; height: 4.5333vw; color: rgb(119, 119, 119); line-height: 4.5333vw; font-weight: 400; margin-left: 0.8vw;"
              >好评率</span>
            </div>
            <div
              class="rax-view"
              style="box-sizing: border-box; display: flex; flex-direction: row; align-content: flex-start; flex: 1 1 0%; position: static; left: 0vw; top: 0vw; height: 4.2667vw; margin-top: 1.6vw;"
            >
              <div
                class="rax-view"
                style="box-sizing: border-box; display: flex; flex-direction: row; place-content: flex-start center; flex-shrink: 0; position: relative; height: 4.2667vw; align-items: center; padding-left: 1.0667vw; padding-right: 1.0667vw; margin-right: 1.3333vw; border-radius: 0.4vw; overflow: hidden; text-align: center; line-height: 4.2667vw; background-color: rgb(217, 107, 108); border-color: rgb(217, 107, 108); border-width: 0.1333vw;"
              >
                <span
                  class="rax-text"
                  style="box-sizing: border-box; display: block; font-size: 2.9333vw; white-space: pre-wrap; color: rgb(255, 255, 255); align-items: center; justify-content: center; height: 4.2667vw; line-height: 4.2667vw;"
                >特价</span>
              </div>
              <img src="https://img.youpin.mi-img.com/tag/bccb1597ceb325878be1e5ff4073e606.png?w=114&amp;h=48"
                style="width: 9.6vw; height: 4.2667vw; margin-right: 1.3333vw; flex-shrink: 0; border-radius: 0.2667vw; overflow: hidden;"
              />
            </div>
          </div>
          <div
            class="rax-view"
            style="box-sizing: border-box; display: flex; flex-direction: row; align-content: flex-start; flex-shrink: 0; position: static; width: 51.7333vw; height: 5.8667vw; left: 0vw; top: 0vw; align-items: center; margin-top: -0.8vw;"
          >
            <!---->
            <span
              class="rax-text"
              style="box-sizing: border-box; display: block; font-size: 3.2vw; white-space: pre-wrap; line-height: 4.5333vw; height: 4.5333vw; color: rgb(51, 51, 51); margin-right: 0.2667vw; font-weight: 500; margin-top: 0.8vw;"
            >¥</span>
            <span
              class="rax-text"
              style="box-sizing: border-box; display: block; font-size: 4.2667vw; white-space: pre-wrap; height: 5.8667vw; line-height: 5.8667vw; color: rgb(51, 51, 51); font-weight: 500;"
            >{{v.data[0].price}}</span>
            <!---->
            <!---->
          </div>
        </div>
      </div>
    </div>

    <!-- {{this.$store.state.details.arr}} -->
  </div>
</template>

<script>

export default {
  methods: {
    fun() {
      this.$router.push("/home");
    },
    fun1(id){
      this.$router.push({path:'/details',query:{newsid:id}})
    }
  },
  data(){
    return {
      arr:[]
    }
  },
  created(){
    this.$store.dispatch("getDetails");
    }
};
</script>

<style scoped>
.re {
  position: absolute;
  z-index: 22;
  width: 0.32rem;
  height: 0.32rem;
  margin-left: 0.1rem;
  margin-top: -3.7rem;
}
.new {
  position: absolute;
  z-index: 22;
  color: white;
  font-size: 0.2rem;
  top: 0.12rem;
  left: 40%;
  font-family: FZYaoti;
  letter-spacing: 0.02rem;
  color: rgb(207, 207, 172);
}
.my-swipe {
  width: 100%;
  height: 3.75rem !important;
}
.era-swipe {
  position: absolute !important;
  top: 0 !important;
}

.my-swipe img {
  width: 100%;
  height: 3.75rem;
}
.era >>> .van-swipe__indicators {
  left: 50% !important;
  bottom: 0.15rem !important;
}
.van-swipe__indicator {
  height: 0.04rem !important;
  width: 0.09rem !important;
  border-radius: 0 !important;
}
.era-swipe p {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 22;
  font-size: 0.16rem;
  bottom: 0.5rem;
  color: white;
  font-weight: bold;
  width: 100%;
  text-align: center;
}
.era-swipe span {
  position: absolute;
  z-index: 22;
  font-size: 0.12rem;
  bottom: 0.28rem;
  width: 100%;
  text-align: center;
  color: white;
  opacity: 0.7;
}
.nav {
  width: 0.43rem;
  width: 100%;
  margin-top: 3.76rem;
  display: flex;
}
.nav div:nth-child(1) {
  font-size: 0.2rem;
  line-height: 0.43rem;
  font-weight: bold;
  margin-left: 0.2rem;
}
.nav div:nth-child(2) {
  font-size: 0.13rem;
  color: rgb(51, 51, 51);
  font-weight: 300;
  line-height: 0.43rem;
  margin-left: 0.06rem;
}
</style>